<template>
	<Modal
	    v-model="modal"
	    :title="modalTitle" @on-visible-change='modalChange'>
	    <Form ref="formValidate" :model="editData" :rules="ruleValidate" :label-width="100">
	        <FormItem label="手机号" prop="userTel">
	            <Input v-model="editData.userTel" placeholder="输入手机号"></Input>
	        </FormItem>
	        <FormItem label="密码" prop="userPwd"  v-if="isShowPwd">
	            <Input v-model="editData.userPwd" placeholder="输入密码" type="password"/>
				<span style="color: #999999;">6-20位字符，可由英文、数字及标点符号组成。</span>
	        </FormItem>
	        <FormItem label="地址" prop="address">
	             <Input v-model="editData.address" placeholder="请输入地址" />
	        </FormItem>
	        <FormItem label='姓名' prop='realName'>
	            <Input v-model="editData.realName" placeholder="请输入姓名"  />
	        </FormItem>
	        <FormItem label='性别' prop='gender'>
	          <Radio-group v-model="editData.gender" >
				    <Radio :label="0">保密</Radio>
					<Radio :label="1">男</Radio>
					<Radio :label="2">女</Radio>
            </Radio-group>
	        </FormItem>
	        <FormItem label="头像" prop="userPhoto">
	            <upload-img @success='imgUploadSuccess'>
	                <Button icon='ios-cloud-upload-outline'>点击上传图片</Button>
	            </upload-img>
	            <img class="uploadSuccess" :src="editData.userPhoto" alt="">
				<div style="color: #999999;" >默认会员头像图片请使用100*100像素jpg/gif/png格式的图片</div>
				
	        </FormItem>
			 <FormItem label='状态' prop='isOpen'>
			    <Radio-group v-model="editData.isOpen" >
			       <Radio :label="0">开启</Radio>
			       <Radio :label="1">关闭</Radio>
			   </Radio-group>
			</FormItem>
	    </Form>
	    <div slot="footer">
	        <Button @click="cancel">取消</Button>
	        <Button type="primary" @click="submit" :loading="loadingBtn">
	            <span v-if="!loadingBtn">确定</span>
	            <span v-else>请稍候...</span>
	        </Button>
	    </div>
	</Modal>
</template>

<script>
	import uploadImg from '../../components/upload'
export default {
    components:{
        uploadImg
    },
    props:{
        type:String
    },
    data(){
		//手机号的验证
		const validatePhone = (rule, value, callback) => {
		 if (!value) {
                return callback(new Error('手机号不能为空'));
            } else if (!/^1[34578]\d{9}$/.test(value)) {
                callback('手机号格式不正确');
            } else {
                callback();
            } 
		};
		//密码的验证
		const validatePwd = (rule, value, callback) => {
			var reg = /^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)]){6,20}$/i;
			if (value) {
				if (!reg.test(value)) {
					callback('密码格式不正确');
				} else {
					callback();
				}
			} else {
				callback();
			}
		};
        return {
            modal:false,
            modalTitle:'',
            editData:{
                userTel:'',
                userPwd:'',
                realName:'',
                gender:'',
                userPhoto:'',
                address:'',
				isOpen:''
            },
            userId:0,
            isEdit:false,
            ruleValidate:{
                userTel:{validator: validatePhone,trigger: 'blur'},
                userPwd:[{required:true,message:'请输入密码'},{validator: validatePwd,trigger: 'blur'}]
            },
            loadingBtn:false,
			isShowPwd:false
        }
    },
    methods:{
        
        show(res){
            this.$nextTick(()=>{
                this.modal = true
                switch (this.type) {
                    case 'add' :
                    this.isEdit = false
					this.isShowPwd = true
                    this.modalTitle = '新增'
                    break
                    case 'edit':
                    this.isEdit = true
					this.isShowPwd = false
                    this.userId = res.row.userId
                    this.$http.post('/user/byId',{id: res.row.userId}).then(res=>{
						if(res.status==200){
							if(res.data.code==200){
								this.editData={
								    userId:res.data.data.userId,
								    userTel:res.data.data.userTel,
									userPwd:res.data.data.userPwd,
								    realName:res.data.data.realName,
								    gender:res.data.data.gender,
								    address:res.data.data.address,
								    userPhoto:res.data.data.userPhoto,
									isOpen:res.data.data.isOpen
								}
								
							}
							
						}
                     
                    })
                    this.modalTitle= '编辑'
                    break
                }
            })
            
        },
        
        //取消
        cancel(){
				this.modal = false;
        },
        //上传成功
        imgUploadSuccess(res){
			this.editData.userPhoto = res.res.filePath;
        },
        //提交
        submit(){
            this.$refs['formValidate'].validate((valid) => {
                if(valid){
                    let data = {
                        userTel:this.editData.userTel,
                        userPwd:this.editData.userPwd,
                        realName:this.editData.realName,
                        gender:this.editData.gender,
                        userPhoto:this.editData.userPhoto,
						address:this.editData.address,
						isOpen:this.editData.isOpen,
                    }
                    let url = '/user/register'
                    if(this.isEdit){
                        data.userId = this.userId
						data.userPwd=''
                        url = '/user/update'
                    }
                    this.$http.post(url,data).then(res=>{
                        if(res.status==200){
							if(res.data.code==200){
								 this.$Message.success('操作成功')
								this.modal = false
								this.$emit('table')
							}
                           
                        }
                    })
                }
                
            })
            
        },
        modalChange(state){
            if(state){

            }else{
                this.$refs.formValidate.resetFields()
            }
        }
    }
}
</script>
<style scoped>
.uploadSuccess{
    width: 200px;
    height: 100px;
}
</style>
